<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<view class="grace-columns">
				<view v-for="(item,index) in card_list" :key="index" :style="{background: item.bankinfo.back_color}" style="margin: 10rpx auto; width:680rpx;height:365rpx;box-shadow:0px 0px 15rpx 0px rgba(131,131,131,0.3);border-radius:20rpx;">
					<view :style="{backgroundImage: 'url('+item.bankinfo.back_img+')'}" style="width:680rpx;height:300rpx;background-size:288rpx 166rpx; background-repeat:no-repeat;background-position-x: 357rpx;background-position-y: 130rpx;">
						<!-- 计划执行状态 -->
						<view style="margin: 30rpx 30rpx;">
							<view class="grace-rows">
								<image :src="item.bankinfo.bank_icon_url" style="width: 50rpx;height: 50rpx;"></image>
								<view class="grace-columns" style="margin-left: 22rpx; position: relative;bottom: 10rpx;width: 300rpx;">
									<text style="margin-bottom: 2rpx; font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);">{{item.name}}({{item.bc_bank_number.last}})</text>
									<image :src="item.types==='信用卡'?'../../static/xinyongka.png':'../../static/chuxuka.png'" style="width: 60rpx;height: 22rpx;"></image>
									<text style="font-size: 24rpx; color: #FFFFFF;">额度：{{item.quota}}</text>
								</view>


								<view v-if="item.wei_kaitong===0&&item.yi===0" @tap="Goto('/pages/generation_plan/passageway?card_id='+item.id+'&types=1,2')"
								 style=" margin-left: 24rpx; width:220rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;text-align: center;line-height: 40rpx;">
									<image src="../../static/xiaoyinlian.png" style="width: 56rpx;height: 34rpx; position: relative; top: 3.5rpx;"></image>
									<text style="position: relative;bottom: 4rpx; line-height:34rpx ;margin-left: 10rpx; font-size:26rpx;font-weight:400;"
									 :style="{color:item.wei_kaitong===0?'rgba(218,28,30,1)':'rgba(218,28,30,1)'}">无通道</text>
								</view>

								<view v-else @tap="geway(item.id)" style=" margin-left: 24rpx; width:220rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;text-align: center;line-height: 40rpx;">
									<image src="../../static/xiaoyinlian.png" style="width: 56rpx;height: 34rpx; position: relative; top: 3.5rpx;"></image>
									<text style="position: relative;bottom: 4rpx; line-height:34rpx ;margin-left: 10rpx; font-size:26rpx;font-weight:400;"
									 :style="{color:item.wei_kaitong===0?'rgba(55,205,97,1)':'rgba(218,28,30,1)'}">{{ item.wei_kaitong===0?'开通完成':'立即开通' }}</text>
								</view>


								<view v-show="item.wei_kaitong!=0" style="position: relative;right: 10rpx;bottom: 5rpx; width:20rpx;height:20rpx;background:rgba(218,28,30,1);border-radius:50%; font-size:15rpx;font-weight:400;color:rgba(255,255,255,1);text-align: center;line-height: 20rpx;">{{ item.wei_kaitong }}</view>
								<view @tap="showDialog3(item.id)" style="margin-left: 15rpx;">
									<image src="../../static/shanchu.png" style="width: 40rpx;height: 40rpx;"></image>
								</view>
							</view>
							<!-- 分割线 -->
							<!-- <view style="width:598rpx;height:1rpx;background:rgba(247,247,247,1);"></view> -->
							<view style="position: relative;top: 5rpx; text-align: center; width:680rpx;height:40rpx;background:rgba(255,255,255,1);margin-left: -30rpx;"
							 :style="{color:item.jihua==='无还款计划'?'rgba(153,153,153,1)':item.jihua==='没有查询到'?'rgba(153,153,153,1)':item.jihua==='计划执行中'?'rgba(63,192,0,1)':item.jihua==='计划暂停中'?'rgba(255,0,0,255)':'rgba(153,153,153,1)'}">{{ item.jihua }}</view>

							<view class="grace-rows" v-if="item.big_id">
								<view class="grace-columns" style="text-align: center;margin: 21rpx 25rpx;">
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">账单日</text>
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{item.billing_day}}日</text>
								</view>

								<view class="grace-columns" style="text-align: center;margin: 21rpx 28rpx;">
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">还款日</text>
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{item.repayment_date}}日</text>
								</view>

								<view class="grace-rows" style="text-align: center;margin:10rpx 0rpx;">
									<text style="font-size:70rpx;font-weight:bold;color:rgba(255,255,255,1);">{{item.shenyu}}</text>
									<view class="grace-columns" style="margin-top: 10rpx;">
										<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">天到期</text>
										<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">({{item.times}})</text>
									</view>
								</view>
								<!-- 进度条 -->
								<view class="jindutiao" v-if="item.big_id">
									<!-- <cmd-progress type="circle" :percent="item.wanchen" :width="40" stroke-shape="square" stroke-color="#00FF00"></cmd-progress> -->
									<cmd-circle cid="circle11" type="circle" :stroke-width="2" :width="40" :percent="item.wanchen" :showInfo="true"
									 stroke-color="#00FF00" :font-size="10"></cmd-circle>
								</view>

							</view>

							<view class="grace-rows" v-else>
								<view class="grace-columns" style="text-align: center;margin: 21rpx 60rpx;">
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">账单日</text>
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{item.billing_day}}日</text>
								</view>

								<view class="grace-columns" style="text-align: center;margin: 21rpx 60rpx;">
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">还款日</text>
									<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{item.repayment_date}}日</text>
								</view>

								<view class="grace-rows" style="text-align: center;margin:10rpx -4rpx;">
									<text style="font-size:70rpx;font-weight:bold;color:rgba(255,255,255,1);">{{item.shenyu}}</text>
									<view class="grace-columns" style="margin-top: 10rpx;">
										<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">天到期</text>
										<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">({{item.times}})</text>
									</view>
								</view>
							</view>


							<view class="grace-nowrap">
								<button @tap="modify(item.id)" type="primary" class="grace-button" plain="true" style="width:180rpx;height:60rpx;border:2rpx solid rgba(255,255,255,1);border-radius:15rpx;">
									<text style="position: relative;bottom: 8rpx; font-size:28rpx;font-weight:400;color:rgba(255,255,255,1);">修改信息</text>
								</button>
								<button @tap="record(item.id)" type="primary" class="grace-button" plain="true" style="width:180rpx;height:60rpx;border:2rpx solid rgba(255,255,255,1);border-radius:15rpx;">
									<text style="position: relative;bottom: 8rpx; font-size:28rpx;font-weight:400;color:rgba(255,255,255,1);">还款记录</text>
								</button>
								<button @tap="seeplan(item.jihua,item.id,item.big_id)" type="primary" class="grace-button" plain="true" style="width:180rpx;height:60rpx;border:4rpx solid rgba(255,255,255,1);border-radius:15rpx;">
									<text style="position: relative;bottom: 8rpx; font-size:28rpx;font-weight:400;color:rgba(255,255,255,1);font-weight:bold;">{{ item.jihua==='计划执行中' || item.jihua==='计划暂停中' ? '查看计划' : '我要还款' }}</text>
								</button>
							</view>
						</view>

					</view>

				</view>

			</view>
			<view style="height:100rpx;"></view>
			<button @tap="xyktj" :style="{background:button_color}" class="button_color">+添加信用卡</button>

			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<!-- <text>请输入验证码</text> -->
					<text style="font-size: 26rpx;">确认删除该银行卡</text></br>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm3">确认</text>
				</view>
			</graceDialog>
			<ourLoading active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";
	import cmdCircle from "@/components/cmd-circle/cmd-circle.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				card_list: [],
				show3: false,
				bc_id: '',
				kekaitong: 0,
				types: '',
				loadings: false
			}
		},
		onLoad: function(opt) {
			this.types = opt.types
			this.shuaxin();
		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/index/index1'
			})
			return true;
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
			this.shuaxin();
		},
		methods: {
			// 获取信用卡列表数据
			shuaxin() {
				const vm = this;
				var myobj = {
					type: '信用卡',
				};
				vm.loadings = true
				this.myPost(
					'api/cardapi/get_card_list',
					myobj,
					function(res) {
						if (res.code == 200) {
							vm.card_list = res.data
							console.log(res.data);
							uni.setStorageSync('yinhang',res.data)
							setTimeout(function() {
								vm.loadings = false
							}, 500)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(function() {
								vm.loadings = false
							}, 500)
						}

					},
					function() {
						setTimeout(function() {
							vm.loadings = false
						}, 500)
					}
				)
			},
			// 添加信用卡页面跳转事件
			xyktj(){
				uni.navigateTo({
					url:'/pages/card/add_credit_card1?types=1,2,3,4,5'
				})
			},
			// 生成计划跳转页面
			seeplan(statu, id,big_id) {
				if (statu === '计划执行中' || statu === '计划暂停中') {
					uni.navigateTo({
						url: '/pages/Repayment/details_of_the_plan?id=' + big_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/Repayment/passageway?xianshi=1&id=' + id 
					})
				}
			},
			// 通道页面跳转事件
			geway(id) {
				uni.navigateTo({
					url: '/pages/Repayment/passageway?id=' + id
				})
			},
			// 修改信用卡信息页面跳转事件
			modify(id) {
				uni.navigateTo({
					url: '/pages/card/modify_credit_card?id=' + id
				})
			},
			// 还款记录页面跳转事件
			record(id){
				uni.navigateTo({
					url: '/pages/Repayment/payment_history?id=' + id
				})
			},
			// 显示删除银行卡提现框
			showDialog3: function(bc_id) {
				this.bc_id = bc_id;
				this.show3 = true;
			},
			// 关闭删除银行卡提现框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 删除银行卡提现框选择了确认
			confirm3: function() {
				this.shanchu();
				this.closeDialog3();
				this.bc_id = '';
			},
			// 删除信用卡
			shanchu() {
				var vm = this;
				var url = 'api/cardapi/delete_credit_card'
				vm.myPost(
					url, {
						id: this.bc_id
					},
					function(res) {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							vm.shuaxin();
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					}
				)
			},
			woyaohuankuan() {
				// var date= new Date(); //0 表示1月
				// date.setDate(0)
				// date.setMonth(date.getMonth() + 2);
				// // 日期设置为0号, 0表示1号的前一天
				// let lastDay = date.setDate(0);
				// console.log('最后一天：' + new Date(lastDay).getTime()) 
				this.Goto('/pages/generation_plan/generation_plan?card_id=' + item.id + '&card_color=' + item.bank.back_color +
					'&card_name=' + item.bank.name + '（' + item.bc_bank_number.last + '）' + '&card_icon=' + item.bank.bank_icon_url +
					'&huankuanri=' + item.bc_repayment)
			}

		},
		components: {
			gracePage,
			graceDialog,
			cmdProgress,
			cmdCircle
		}
	}
</script>

<style>
	.button_color{
		position: fixed;bottom: 0; width:750rpx;height:100rpx;
		/* background:#3187D5; */
		font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);line-height: 100rpx;border-radius: 0rpx ;
	}
	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.jindutiao {
		margin-top: 17rpx;
		margin-left: 66rpx;
		margin-right: 15rpx;
	}
</style>
